<script setup lang='ts'>
import {
  Card as VanCard,
  CellGroup as VanCellGroup,
  Cell as VanCell,
  Divider as VanDivider,
  Space as VanSpace
} from 'vant'
</script>

<template>
<van-space direction="vertical" fill>
  <van-card>
    <template #title>
      <h2>关于知临开发工作室</h2>
    </template>
    <template #desc>
      <p>知临开发工作室是一支专注于企业级应用开发的专业团队，拥有丰富的Web应用开发经验。</p>
    </template>
  </van-card>

  <van-divider>我们的订餐系统</van-divider>

  <van-cell-group inset>
    <van-cell title="核心功能" value="详情" />
    <van-cell title="在线菜单浏览与菜品选择" />
    <van-cell title="智能购物车与订单管理" />
    <van-cell title="多支付方式集成" />
    <van-cell title="实时订单状态跟踪" />
    <van-cell title="数据分析与报表功能" />
  </van-cell-group>

  <van-card>
    <template #desc>
      <p>系统采用前沿的Vue3技术栈开发，具备高性能、易维护和良好的用户体验。</p>
    </template>
  </van-card>
</van-space>
</template>

<style lang='scss' scope>
:deep(.van-space) {
  min-height: 100vh;
  padding: 16px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.van-card {
  margin-top: 12px;
  background-color: rgba(255, 255, 255, 0.85);
}

.van-cell-group {
  background-color: transparent;
  
  .van-cell {
    background-color: rgba(255, 255, 255, 0.7);
    margin-bottom: 8px;
    border-radius: 8px;
  }
}
</style>